<!--
 * @Descripttion: 
 * @version: 
 * @Author: wutao
 * @LastEditors: wutao
 * @LastEditTime: 2025-09-01 21:25:54
-->
<!-- 修改后的模板部分 -->
<!-- 修改后的模板部分 -->
<template>
  <div>
    <p style="margin: 15px 0; color: #9998a9">
      {{ formatTimestamp(topList.createTime) }}
    </p>

    <div class="top-box" :class="isShadow?'boxShadow':''">
      <p>{{ topList.title }}</p>
      <div class="top-box-list" style="background: linear-gradient(180deg, rgba(8,131,241,0.028) 0%, rgba(8,131,241,0.012) 100%);border: 1px solid rgba(8,131,241,0.08);">
        <!-- 修改1：外层循环添加card前缀 -->
        <div
          v-for="(cardItem, cardIndex) in topList.card"
          class="top-box-list-item top-box-list-item-border"
          :key="'card-' + cardIndex"
          @click="gotosldetails(cardItem)"
        >
          <!-- 修改2：内层循环使用不同key命名 -->
          <div
            style="
              margin-bottom: 12px;
              line-height: 26px;
              text-align: justify;
              text-justify: inter-ideograph;
            "
            v-for="(dataItem, dataIndex) in topList.card[0].list"
            :key="'data-' + dataIndex"
          >
            {{ dataIndex + 1 }}. {{ dataItem }}
          </div>
        </div>
      </div>

      <!-- 修改3：第二个外层循环使用相同前缀 -->
      <div
        class="top-box-btn"
       @click="djrbseechance"
      >
        点击查看详细内容
      </div>

      <p class="askMe">你可以尝试这样问我</p>
      <div
        @click="sendMessageBy(linkItem)"
        v-for="(linkItem, linkIndex) in topList.link"
        class="top-box-list-item-link"
        :key="'link-' + linkIndex"
      >
        {{ linkItem }}
      </div>
    </div>
  </div>
</template>


  
  <script>
import {} from "@/utils/common";
import { Toast } from "vant";
import commonFunc from "@/utils/ysjh";
export default {
  data() {
    return {
      datalist: [],
    };
  },
  props: {
    topList: {
      type: Object,
      default: () => {},
    },isShadow: {
    type: Boolean,
    default: false,
  },
  },
  watch: {},
  mounted() {
    console.log(this.topList.card,'topListtopList123')
    // this.datalist = JSON.parse(this.topList.card[0].name);
  },
  created() {},
  methods: {
    djrbseechance() {
      let openSource = this.topList.url.openSource;
      let openType = this.topList.url.openType;
      let functionCode = this.topList.url.functionCode;
      let param = this.topList.url.param;
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    sendMessageBy(e) {
      this.$parent.showCollect = false;
      this.$parent.someMethod(e);
    },

    formatTimestamp(ms) {
      if (!ms) {
        return "";
      }
      const time = Number(ms);
      if (!time || isNaN(time)) return "-";
      const d = new Date(time);
      const Y = d.getFullYear();
      const M = String(d.getMonth() + 1).padStart(2, "0");
      const D = String(d.getDate()).padStart(2, "0");
      const h = String(d.getHours()).padStart(2, "0");
      const m = String(d.getMinutes()).padStart(2, "0");
      const s = String(d.getSeconds()).padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
  },
};
</script>
  
 <style lang="less" scoped>
.ztfx-span {
  opacity: 1;
  color: #666666 !important;
  // font-family: PingFang SC;
  // font-weight: regular;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: justified;
  background: none !important;
  font-weight: normal !important;
}
.top-box-list-item-border {
  // border-bottom: 1px solid #aecde8;
}
.top-box-list {
  padding-bottom: 1px !important;
}
</style>
  